<template>
  <div class="navbar">
    <div class="right-menu">
      <el-dropdown class="avatar-container right-menu-item" trigger="click">
        <div class="avatar-wrapper">
          <img src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif" class="user-avatar">
          <i class="el-icon-caret-bottom"/>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item><router-link to="">个人信息</router-link></el-dropdown-item>
          <el-dropdown-item><router-link to="">站内消息</router-link></el-dropdown-item>
          <el-dropdown-item divided><span style="display:block;" @click="Logout">安全退出</span></el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>

  import { getUserId,getName } from "@/utils/UserCookies";

  export default {
    name: "TopMenuComponent",
    data(){
      return {
        userId: ''
      }
    },
    components: {
    },
    computed: {
    },
    created: function(){
      this.userId = getUserId();
    },
    methods: {
      // 安全退出
      Logout() {
        let _this = this;
        let prams = {userId: _this.userId};
        this.$store.dispatch("cmsUserLoginOut", prams).then(response => {
          if (response.code === 200){
            _this.$message.info("再见：" + getName());

            setTimeout(function () {
              _this.$router.push({path: "/"});
            }, 800)
          } else {
            _this.pageData.loading = false;
            _this.$message.error(response.message)
          }
        });
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .navbar {
    height: 50px;
    line-height: 50px;
    border-radius: 0px !important;
    background-color: white;
    .hamburger-container {
      line-height: 58px;
      height: 50px;
      float: left;
      padding: 0 10px;
    }
    .breadcrumb-container{
      float: left;
    }
    .errLog-container {
      display: inline-block;
      vertical-align: top;
    }
    .right-menu {
      float: right;
      height: 100%;
      &:focus{
        outline: none;
      }
      .right-menu-item {
        display: inline-block;
        margin: 0 8px;
      }
      .screenfull {
        height: 20px;
      }
      .international{
        vertical-align: top;
      }
      .theme-switch {
        vertical-align: 15px;
      }
      .avatar-container {
        height: 50px;
        margin-right: 30px;
        .avatar-wrapper {
          top: 5px;
          position: relative;
          .user-avatar {
            cursor: pointer;
            width: 40px;
            height: 40px;
            border-radius: 10px;
          }
          .el-icon-caret-bottom {
            cursor: pointer;
            position: absolute;
            right: -20px;
            top: 25px;
            font-size: 12px;
          }
        }
      }
    }
  }
</style>
